<!--
* @description 帮派人员列表
* @fileName personList.vue
* @author huangyu
* @date 2023/02/28 22:01:19
!-->
<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="名字">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="选择家族">
        <el-select v-model="house">
          <el-option label="全部" value=""></el-option>
          <el-option :label="item.label" :value="item.label" v-for="(item, index) in houserList"
            :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" @click="clickAddPerson">新增人员</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="list" max-height="650px">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="名字" prop="name"></el-table-column>
      <el-table-column label="家族" prop="house"></el-table-column>
      <el-table-column label="门派" prop="sect"></el-table-column>
      <el-table-column label="积分" prop="score"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="clickEdit(scope.row)">编辑</el-button>
          <el-button type="danger" size="mini" @click="clickDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination :total="total" :current-page="pageindex" :display="pagesize" @pagechange="pagechange"></pagination>

    <el-dialog :title="personForm._id?'编辑人员':'新增人员'" v-if="dialogPerson" width="550px" :visible.sync="dialogPerson" v-dialogDrag>
      <el-form label-width="100px">
        <el-form-item label="名字">
          <el-input v-model="personForm.name"></el-input>
        </el-form-item>
        <el-form-item label="选择家族">
          <el-select v-model="personForm.house">
            <el-option :label="item.label" :value="item.label" v-for="(item, index) in houserList"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择门派">
          <el-select v-model="personForm.sect">
            <el-option :label="item.label" :value="item.label" v-for="(item, index) in classItemList"
              :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="积分">
          <el-input v-model="personForm.score"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="submitPerson">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { get } from '@/common/app.js'
import pagination from "@/components/common/pagination.vue";
import { houserItem,classItem } from "@/enum/zhuxian.js"
export default {
  components: { pagination },
  data() {
    return {
      list: [],
      name: "",
      house: "",
      houserItemList: houserItem,
      classItemList: classItem,
      pageindex: 1,
      pagesize: 20,
      total: 0,
      houserList: [],
      personForm: {
        score: 0,
      },
      dialogPerson: false,
    }
  },
  mounted() {
    this.getHouseData()
    this.getData()
  },
  methods: {
    search(){
      this.pageindex = 1
      this.getData()
    },
    getData() {
      let params = {
        type: "getClan",
        api: "api-clan-list",
        data: {
          name: this.name,
          house: this.house,
          pageIndex: this.pageindex,
          pageSize: this.pagesize,
        }
      }
      get('game', params).then(res => {
        if (res) {
          this.list = res.list
          this.total = res.total
        }
      })
    },
    pagechange: function (currentPage) {
      this.pageindex = currentPage;
      this.getData();
    },
    clickAddPerson(){
      this.personForm = {}
      this.personForm.score = 0
      this.dialogPerson = true
    },
    submitPerson(){
      this.personForm.score = this.personForm.score?Number(this.personForm.score):0
      let params = {
          type: "getClan",
          api: "api-clan-add",
          data: this.personForm,
      }
      get('game',params).then(res=>{
          if(res){
            console.log(res)
            if(res.type=='error'){
              this.$message.error(res.msg)
              return
            }
            this.$message.success("保存成功！")
            this.getData()
            this.dialogPerson = false
          }
      })
    },
    clickEdit(row){
      this.dialogPerson = true
      this.personForm = row
    },
    clickDel(row){
      this.$confirm(`确认要删除" ${row.name} "吗？`, "提示").then(() => {
        let params = {
          type: "getClan",
          api: "api-clan-del",
          data: {
            _id: row._id,
          }
        }
        get('game',params).then(res=>{
            if(res){
              this.$message.success("删除成功！")
              this.getData()
            }
        })
    }).catch(() => {
        this.$message({
            type: 'info',
            message: '已取消操作'
        });          
    });
    },
    getHouseData(){
      let params = {
          type: "getClan",
          api: "api-houser-list",
          data: {}
        }
        get('game',params).then(res=>{
            if(res){
              this.houserList = res
            }
        })
    },
  },
}
</script>

<style scoped></style>